<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> -->
    <script src="../js/jquery-3.7.1.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.21-rc/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.9.21-rc/dist/layui.js"></script>
    <style>
        tr, td {
            outline: none !important;
        }
    </style>

    <script>
        //获取数据库数据,以及显示设置
        $(document).ready(function () {
            $.ajax({
                url: '../adminManager',
                type: 'post',
                dataType: "json",
                data: {
                    'page': 1,
                    'pageSize': 5,
                    'method': 'findAll'
                },
                success: function (result) {
                    if (result.code == 200) {
                        var data = result.data;
                        var html = '';
                        var admin_role = '';
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].dr == 0) {
                                admin_role = '系统管理员';
                            } else if (data[i].dr == 1) {
                                admin_role = '宿舍管理员';
                            }
                            html += '<tr>\n' +
                                '\t\t\t\t\t\t\t\t\t<td>\n' +
                                '\t\t\t\t\t\t\t\t\t\t<input type="checkbox" data-id="' + data[i].id + '">\n' +
                                '\t\t\t\t\t\t\t\t\t</td>\n' +
                                '\t\t\t\t\t\t\t\t\t<td>' + (i + 1) + '</td>\n' +
                                '\t\t\t\t\t\t\t\t\t<td>' + data[i].username + '</td>\n' +
                                '\t\t\t\t\t\t\t\t\t<td>' + data[i].password + '</td>\n' +
                                '\t\t\t\t\t\t\t\t\t<td>' + data[i].name + '</td>\n' +
                                '\t\t\t\t\t\t\t\t\t<td>' + admin_role + '</td>\n' +
                                '\t\t\t\t\t\t\t\t\t<td>' + data[i].gender + '</td>\n' +
                                '\t\t\t\t\t\t\t\t\t<td>' + data[i].phone + '</td>\n' +
                                '\t\t\t\t\t\t\t\t\t<td>\n' +
                                '\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-info btn-xs" onclick="info_btn(this)" data-toggle="modal" data-target="#infoModal">详情</button>\n' +
                                '\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-warning btn-xs btn-primary" onclick="edit_btn(this)" data-toggle="modal" data-target="#updateModal">编辑</button>\n' +
                                '\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-danger btn-xs" onclick="delete_btn(this)">删除</button>\n' +
                                '\t\t\t\t\t\t\t\t\t</td>\n' +
                                '\t\t\t\t\t\t\t\t\t<td></td>\n' +
                                '\t\t\t\t\t\t\t\t</tr>'
                        }
                        $('tbody').html(html);

                        //获取响应的总数据条数
                        var total_count = data[0].pageTotal;
                        //写入指定位置
                        $('#total').text(total_count);
                        $('#current-page').text(1);
                        var total_page = Math.ceil(total_count/5);
                        $('#total-page').text(total_page);

                    } else if (result.code == 100) {
                        $('tbody').html('还没有管理员信息');
                        $('total').text(0);
                        $('current-page').text(1);
                        $('total-page').text(1);
                    }
                },
                error: function () {
                    layer.msg('网络异常');
                }
            })
        })
    </script>
    <style>

    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-10">
            <!-- 搜索区域 -->
            <div class="panel panel-default">
                <div class="panel-heading">搜索</div>
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label>字段</label>
                            <select name="key" class="form-control" id="">
                                <option value="username">宿管账号</option>
                                <option value="name">宿管姓名</option>
                                <option value="phone">宿管电话</option>
                                <option value="gender">宿管性别</option>
                                <option value="role">角色</option>
                            </select>

                        </div>
                        <div style="margin-left: 20px;" class="form-group">
                            <label>值</label>
                            <input style="width: 130px;" type="text" class="form-control"
                                   id="keyword" placeholder="输入搜索参数">
                        </div>
                        <div class="form-group" style="margin-left: 40px;">
                            <button id="search-btn" type="button" class="btn btn-ms btn-info"> <span
                                    class="glyphicon glyphicon-zoom-in"></span>搜索
                            </button>
                        </div>
                        <div class="form-group" style="margin-left: 40px;">
                            <button type="button" class="btn btn-ms btn-primary" data-toggle="modal"
                                    data-target="#addModal"><span
                                    class="glyphicon glyphicon-plus"></span>添加宿管
                            </button>
                        </div>
                        <div class="form-group" style="margin-left: 40px;">
                            <button id="delete-list" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span>批量删除
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- 列表展示 -->
            <div>
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th><input type="checkbox">全选</th>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>密码</th>
                        <th>姓名</th>
                        <th>角色</th>
                        <th>性别</th>
                        <th>联系电话</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>1</td>
                        <td>admin</td>
                        <td>123456</td>
                        <td>赏金</td>
                        <td>男</td>
                        <td>13609292862</td>
                        <td>
                            <button type="button" class="btn btn-info btn-xs">详情</button>
                            <button type="button" class="btn btn-warning btn-xs btn-primary" data-toggle="modal"
                                    data-target="#updateModal">编辑
                            </button>
                            <button type="button" class="btn btn-danger btn-xs">删除</button>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>2</td>
                        <td>asdfgh</td>
                        <td>1234567</td>
                        <td>干脆面</td>
                        <td>男</td>
                        <td>13603532862</td>
                        <td>
                            <button type="button" class="btn btn-info btn-xs">详情</button>
                            <button type="button" class="btn btn-warning btn-xs btn-primary" data-toggle="modal"
                                    data-target="#updateModal">编辑
                            </button>
                            <button type="button" class="btn btn-danger btn-xs">删除</button>
                        </td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>

                <nav aria-label="...">
                    共有<span id="total"></span>条记录
                    <span id="current-page"></span>/<span id="total-page"></span>页
                    <button class="btn btn-default btn-xs" id="index">首页</button>
                    <button class="btn btn-default btn-xs" id="prev">上一页</button>
                    <button class="btn btn-default btn-xs" id="next">下一页</button>
                    每页显示:
                    <select name="pageNumber">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                    </select>
                    条
                    跳转到:
                    <input id="page-input" type="text" style="width: 50px">
                    <button class="btn btn-default btn-xs" id="jump">GO</button>
                </nav>

            </div>
        </div>
    </div>
</div>

<!-- 添加信息Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加宿管信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input id="username" type="email" class="form-control" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input id="password" type="password" class="form-control" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">角色</label>
                        <div class="col-sm-10">
                            <select id="role">
                                <option selected value="1">宿舍管理员</option>
                                <option value="0">系统管理员</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input id="name" class="form-control" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <input id="gender" class="form-control" placeholder="请输入性别">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">联系电话</label>
                        <div class="col-sm-10">
                            <input id="phone" class="form-control" placeholder="请输入电话">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="add_btn" type="button" class="btn btn-primary">保存信息</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改信息Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改宿管信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input id="edit_username" type="email" readonly class="form-control" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input id="edit_password" type="password" class="form-control" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">角色</label>
                        <div class="col-sm-10">
                            <input id="edit_role" class="form-control" readonly placeholder="请输入角色">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input id="edit_name" class="form-control" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <input id="edit_gender" class="form-control" placeholder="请输入性别">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">联系电话</label>
                        <div class="col-sm-10">
                            <input id="edit_phone" class="form-control" placeholder="请输入电话">
                        </div>
                    </div>
                    <hidden id="hidden-id"></hidden>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="editAdmin-btn" class="btn btn-primary">保存信息</button>
            </div>
        </div>
    </div>
</div>

<!-- 详情Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改宿管信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input id="info_username" type="email" readonly class="form-control" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input id="info_password" type="password" readonly class="form-control" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">角色</label>
                        <div class="col-sm-10">
                            <input id="info_role" class="form-control" readonly placeholder="请输入角色">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input id="info_name" class="form-control" readonly placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <input id="info_gender" class="form-control" readonly placeholder="请输入性别">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">联系电话</label>
                        <div class="col-sm-10">
                            <input id="info_phone" class="form-control" readonly placeholder="请输入电话">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    //对用户名的框添加管理员信息的模态框中对用户名的输入框添加失去焦点事件
    $('#username').blur(function () {
        //获取用户名
        var username = $('#username').val().trim();

        if (username == null) {
            layer.tips('用户名不能为空', '#username');
        } else {
            //ajax发送到服务端判断是否可用,如果用户已存在,那么禁用保存信息按钮
            $.ajax({
                url: '../adminManager',
                type: 'post',
                dataType: 'json',
                data: {
                    'username': username,
                    'method': 'checkUsername'
                },
                success: function (result) {
                    // 如果用户名可用,则取消按钮的禁用效果,不可用则添加
                    if (result.code == 200) {
                        //可用
                        $('add_btn').removeAttr('disabled');
                    } else {
                        //不可用,禁用提交
                        layer.tips('用户名已存在', '#username');
                        $('#add_btn').attr('disabled', 'disabled');
                    }
                },
                error: function () {
                    layer.msg('网络异常');
                }
            })
        }
    })

    $('#add_btn').click(function () {
        var username = $('#username').val().trim();
        var password = $('#password').val().trim();
        var name = $('#name').val().trim();
        var gender = $('#gender').val().trim();
        var phone = $('#phone').val().trim();
        var role = $('#role').val();
        var ok = true;

        if (username == '' || password == '' || name == '' || phone == "") {
            ok = false;
            layer.msg('请填写完整数据信息');
        }
        //校验格式有效性
        //正则表达式
        var pattern = /^1[3-9]\d{9}$/;
        //匹配格式
        if (!pattern.test(phone)) {
            //不匹配
            ok = false;
            layer.tips('请输入正确的手机号', '#phone');
        }
        //发送请求
        if (ok) {
            $.ajax({
                url: '../adminManager',
                type: 'post',
                dataType: 'json',
                data: {
                    'username': username,
                    'password': password,
                    'name': name,
                    'gender': gender,
                    'phone': phone,
                    'role': role,
                    'method': 'add'
                },
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg('添加成功');
                        setTimeout(function () {
                            $('#addModal').modal('hide');
                            window.location.reload();
                        }, 1000)
                    } else {
                        layer.msg('添加失败');
                    }
                },
                error: function () {
                    layer.msg('网络异常')
                }
            })
        }
    })

    // 删除
    function delete_btn(obj) {
        layer.confirm('确认删除?', {icon: 2}, function () {
            //确认是哪一个删除按钮被点击
            var tr = obj.parentNode.parentNode;
            //确定当前按钮所在的行
            tr = $(tr);
            //获取第一列中的input元素
            var input = tr.find('td:eq(0)').children('input')[0];
            //获取存储在input元素上data-id的属性值
            var id = input.dataset.id;
            //获取对应行id
            $.ajax({
                url:'../adminManager',
                type:'post',
                dataType:'json',
                data:{
                    'id':id,
                    'method':'delete'
                },
                success:function (result) {
                    if (result.code == 200) {
                        layer.msg('删除成功');
                        setTimeout(function (){
                            window.location.reload();

                        },1000)
                    } else {
                        layer.msg('删除失败');
                    }
                },
                error:function () {
                    layer.msg('网络异常');
                }
            })

            layer.msg(id, {icon: 1});
        }, function () {
            // layer.msg('点击取消的回调');
        });
    }

    //编辑
    function edit_btn(obj){
        var tr = obj.parentNode.parentNode;
        //确定当前按钮所在的行
        tr = $(tr);
        //获取第一列中的input元素
        var input = tr.find('td:eq(0)').children('input')[0];
        //获取存储在input元素上data-id的属性值
        var id = input.dataset.id;
        $('#hidden-id').val(id);
        //获取用户名
        var username = tr.find('td:eq(2)').text();
        $('#edit_username').val(username);
        var password = tr.find('td:eq(3)').text();
        $('#edit_password').val(password);
        var name = tr.find('td:eq(4)').text();
        $('#edit_name').val(name);
        var role = tr.find('td:eq(5)').text();
        $('#edit_role').val(role);
        var gender = tr.find('td:eq(6)').text();
        $('#edit_gender').val(gender);
        var phone = tr.find('td:eq(7)').text();
        $('#edit_phone').val(phone);
    }

    $('#editAdmin-btn').click(function (){
        var id = $('#hidden-id').val();
        var username = $('#edit_username').val().trim();
        var password = $('#edit_password').val().trim();
        var name = $('#edit_name').val().trim();
        var gender = $('#edit_gender').val().trim();
        var phone = $('#edit_phone').val().trim();
        var role = $('#edit_role').val();
        var ok = true;

        // console.log(gender);
        // console.log(password);
        // console.log(name);
        // console.log(phone);
        // console.log(666);
        if (gender == ''|| password == '' || name == '' || phone == ''){
            ok = false;
            layer.msg('填写完整的数据信息!');
            return
        }
        //正则表达式
        var pattern = /^1[3-9]\d{9}$/;
        //匹配格式
        if (!pattern.test(phone)) {
            //不匹配
            ok = false;
            layer.tips('请输入正确的手机号', '#phone');
            return;
        }
        if (ok) {
            $.ajax({
                url:'../adminManager',
                type:'post',
                dataType:'json',
                data:{
                    'id':id,
                    'username':username,
                    'password':password,
                    'name':name,
                    'gender':gender,
                    'phone':phone,
                    'role':role,
                    'method':'edit'
                },
                success:function (result){
                    if (result.code == 200){
                        layer.msg('修改成功');
                        setTimeout(function (){
                            window.location.reload();
                        },500)
                    }else {
                        layer.msg('修改失败');
                    }
                },
                error:function (){
                    layer.msg('网络异常');
                }
            })
        }
    })


    //下一页
    $('#next').click(function (){
        //获取当前的页码数
        var current_page = $('#current-page').text();
        //获取总页数
        var total_page = $('#total-page').text();
        //判断
        if (current_page >= total_page) {
            layer.msg('已经是最后一页了');
        }else {
            //获取每页显示条数
            var pageNumber = $('select[name="pageNumber"]').val();

            var key = $('select[name="key"]').val();

            var value = $('#keyword').val().trim();
            $.ajax({
                url:'../adminManager',
                type:'post',
                dataType:'json',
                data:{
                    'method':'paging',
                    'page':parseInt(current_page)+1,
                    'pageSize':pageNumber,
                    'key':key,
                    'value':value
                },
                success:function (result){
                    //调用数据渲染函数
                    loadTableData(result,parseInt(current_page)+1,pageNumber);
                },
                error:function (){
                    layer.msg('网络异常');
                }
            })
        }
    })


    //上一页
    $('#prev').click(function (){
        //获取当前的页码数
        var current_page = $('#current-page').text();
        //获取总页数
        var total_page = $('#total-page').text();
        //判断
        if (current_page <= 1) {
            layer.msg('已经是第一页了');
        }else {
            //获取每页显示条数
            var pageNumber = $('select[name="pageNumber"]').val();

            var key = $('select[name="key"]').val();

            var value = $('#keyword').val().trim();
            $.ajax({
                url:'../adminManager',
                type:'post',
                dataType:'json',
                data:{
                    'method':'paging',
                    'page':parseInt(current_page)-1,
                    'pageSize':pageNumber,
                    'key':key,
                    'value':value
                },
                success:function (result){
                    //调用数据渲染函数
                    loadTableData(result,parseInt(current_page)-1,pageNumber)
                },
                error:function (){
                    layer.msg('网络异常')
                }
            })
        }
    })

    //跳转指定页
    $('#jump').click(function (){
        //获取输入
        //获取当前的页码数
        var current_page = $('#page-input').val();
        //获取总页数
        var total_page = $('#total-page').text();
        if (current_page == '') {
            layer.msg('请输入页码');
        }else{
            //判断为是否为数字并且超范围
            //判断
            if (isNaN(current_page) || current_page > total_page || current_page < 1) {
                layer.msg('超出页码范围');
            }else {
                //获取每页显示条数
                var pageNumber = $('select[name="pageNumber"]').val();

                var key = $('select[name="key"]').val();

                var value = $('#keyword').val().trim();
                $.ajax({
                    url:'../adminManager',
                    type:'post',
                    dataType:'json',
                    data:{
                        'method':'paging',
                        'page':current_page,
                        'pageSize':pageNumber,
                        'key':key,
                        'value':value
                    },
                    success:function (result){
                        //调用数据渲染函数
                        loadTableData(result,current_page,pageNumber)
                    },
                    error:function (){
                        layer.msg('网络异常')
                    }
                })
            }
        }
    })

    //切换每页显示的条数
    $('select[name="pageNumber"]').change(function (){
        //获取每页显示条数
        var pageNumber = $('select[name="pageNumber"]').val();

        var key = $('select[name="key"]').val();

        var value = $('#keyword').val().trim();
        $.ajax({
            url: '../adminManager',
            type: 'post',
            dataType: 'json',
            data: {
                'method': 'paging',
                'page': 1,
                'pageSize': pageNumber,
                'key': key,
                'value': value
            },
            success: function (result) {
                //调用数据渲染函数
                loadTableData(result, 1, pageNumber)
            },
            error: function () {
                layer.msg('网络异常')
            }
        })
    })

    function loadTableData(result,current_page,pageNumber){
        console.log(current_page);
        console.log(result)
        if (result.code == 200) {
            var data = result.data;
            var html = '';
            var admin_role = '';
            for (let i = 0; i < data.length; i++) {
                if (data[i].dr == 0) {
                    admin_role = '系统管理员';
                } else if (data[i].dr == 1) {
                    admin_role = '宿舍管理员';
                }
                html += '<tr>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>\n' +
                    '\t\t\t\t\t\t\t\t\t\t<input type="checkbox" data-id="' + data[i].id + '">\n' +
                    '\t\t\t\t\t\t\t\t\t</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + (i + 1) + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + data[i].username + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + data[i].password + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + data[i].name + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + admin_role + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + data[i].gender + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>' + data[i].phone + '</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td>\n' +
                    '\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-info btn-xs">详情</button>\n' +
                    '\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-warning btn-xs btn-primary" onclick="edit_btn(this)" data-toggle="modal" data-target="#updateModal">编辑</button>\n' +
                    '\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-danger btn-xs" onclick="delete_btn(this)">删除</button>\n' +
                    '\t\t\t\t\t\t\t\t\t</td>\n' +
                    '\t\t\t\t\t\t\t\t\t<td></td>\n' +
                    '\t\t\t\t\t\t\t\t</tr>'
            }
            $('tbody').html(html);

            //获取响应的总数据条数
            var total_count = data[0].pageTotal;
            //写入指定位置
            $('#total').text(total_count);
            console.log(current_page);
            $('#current-page').text(current_page);
            var total_page = Math.ceil(total_count/pageNumber);
            $('#total-page').text(total_page);

        } else if (result.code == 100) {
            $('tbody').html('还没有管理员数据');
            $('total').text(0);
            $('current-page').text(1);
            $('total-page').text(1);
        }
    }

    //搜索按钮
    $('#search-btn').click(function (){
        //获取每页显示条数
        var pageNumber = $('select[name="pageNumber"]').val();

        var key = $('select[name="key"]').val();

        var value = $('#keyword').val().trim();
        $.ajax({
            url: '../adminManager',
            type: 'post',
            dataType: 'json',
            data: {
                'method': 'paging',
                'page': 1,
                'pageSize': pageNumber,
                'key': key,
                'value': value
            },
            success: function (result) {
                //调用数据渲染函数
                loadTableData(result, 1, pageNumber)
            },
            error: function () {
                layer.msg('网络异常')
            }
        })

    })

    //详情
    function info_btn(obj){
        var tr = obj.parentNode.parentNode;
        //确定当前按钮所在的行
        tr = $(tr);

        //获取用户名
        var username = tr.find('td:eq(2)').text();
        $('#info_username').val(username);
        var password = tr.find('td:eq(3)').text();
        $('#info_password').val(password);
        var name = tr.find('td:eq(4)').text();
        $('#info_name').val(name);
        var role = tr.find('td:eq(5)').text();
        $('#info_role').val(role);
        var gender = tr.find('td:eq(6)').text();
        $('#info_gender').val(gender);
        var phone = tr.find('td:eq(7)').text();
        $('#info_phone').val(phone);
    }

    //批量删除
    $('#delete-list').click(function (){
        //声明
        var id_arr = [];
        $('tbody input[type="checkbox"]').each(function (){
            //每一个去判断是否勾选
            if ($(this).prop('checked')){
                //获取id
                var id = $(this).attr('data-id');
                id_arr.push(id);
            }
        })
        if (id_arr.length <= 0){
            layer.msg('请选择要删除的数据');
        }else{
            layer.confirm('确认删除?', {icon: 2}, function () {
                $.ajax({
                    url:'../adminManager',
                    type:'post',
                    dataType:'json',
                    data:{
                        'id_arr':id_arr,
                        'method':'deleteList'
                    },
                    success:function (result) {
                        if (result.code == 200) {
                            layer.msg('删除成功');
                            setTimeout(function (){
                                window.location.reload();
                            },1000)
                        } else {
                            layer.msg('删除失败');
                        }
                    },
                    error:function () {
                        layer.msg('网络异常');
                    }
                })

                layer.msg(id, {icon: 1});
            }, function () {
                // layer.msg('点击取消的回调');
            });
        }
    })

</script>

</body>
</html>
